<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    tr,
    th {
        border: 1px rgb(255, 255, 255) solid;
        width: 200px;
        height: 50px;

    }

    .aa {
        border-top-left-radius: 15%;

    }

    .bb {
        border-top-right-radius: 15%;
    }

    th {
        background-color: #F26371;
        color: aliceblue;
    }
</style>

<body>
<<<<<<< HEAD
    <p>商品名称22222：<input type="text" class="na"></p>
=======
    <p>商品名称00000：<input type="text" class="na"></p>
>>>>>>> dev
    <p>商品价格：<input type="text" class="pr"></p>
    <p>商品数量：<input type="text" class="num"></p>
    <p>收货地址：<input type="text" class="adr"><button onclick="add()">添加</button></p>
    <h1>订单详情页</h1>
    <table>
        <thead>
            <tr>
                <th class="aa">商品名称</th>
                <th>商品价格</th>
                <th>商品数量</th>
                <th>总价</th>
                <th class="bb">收货地址</th>
            </tr>
        </thead>
        <tbody>
            <tr>

            </tr>
        </tbody>
    </table>
</body>

</html>
<script>
    var na = document.querySelector('.na')
    var pr = document.querySelector('.pr')
    var num = document.querySelector('.num')
    var tbody = document.querySelector('tbody')
    var adr = document.querySelector('.adr')


    function cun(arr) {
        localStorage.setItem('data', JSON.stringify(arr))
    }

    function qu() {
        var a = localStorage.getItem('data');
        if (a != null) {
            return JSON.parse(a)
        } else {
            return []
        }
    }

    function add() {
        var arr = qu();
        arr.push({
            cname: na.value,
            price: pr.value,
            number: num.value,
            address: adr.value
        })
        cun(arr);
        xr();
    }

    function xr() {
        tbody.innerHTML = '';
        var arr = qu();
        for (var i = 0; i < arr.length; i++) {
            var tr = document.createElement('tr');
            tr.innerHTML = `
            <td>${arr[i].cname}</td>
                <td>${arr[i].price}<span>元</span></td>
                <td>${arr[i].number}</td>
                <td>${arr[i].price * arr[i].number}<span>元</span></td>
                <td>${arr[i].address}</td>
            `;
            tbody.appendChild(tr)
        }
    }
    xr()
</script>